<template>
  <Menu ref="menus" :className="theme" :datas="data" :inlineCollapsed="siderCollapsed" @select="menuSelect"></Menu>
</template>

<script>
export default {
  name: "PaasMenu",
  props: {
    url: "",
    disabled: {
      default: false,
    },
    theme: "h-menu-white",
    value: "",
    format: {
      default: "YYYY-MM-DD",
    },
    type: {
      default: "date",
    },
  },
  computed: {
    siderCollapsed() {
      return this.$store.menus.siderCollapsed;
    },
    current() {
      return this.$store.menus.current;
    },
    data() {
      return this.$store.menus.data;
    },
  },
  mounted() {
    if (this.$store.loginFlag && this.data.length == 0) {
      this.$post(this.url).then((res) => {
        this.initSearch(res.data.data);
        this.$store.setSearchData(this.searchData);
        this.$store.setMenuData(res.data.data);
      });
    }
  },
  updated() {
    this.$refs.menus.select(this.current);
  },
  data() {
    return {
      searchData: [],
    };
  },
  watch: {
    $route() {
      let path = this.$route.path;
      if (this.$store.menus.current == path) {
        this.$refs.menus.select(path);
      }
    },
  },
  methods: {
    menuSelect(data) {
      this.$store.setCurrent(data.key);
      this.$store.setTitle(data.title);
      this.$store.setMenuId(data.id);
      this.$router.push(data.key);
      this.$store.setMenuCache({ url: data.key, title: data.title });
    },
    initSearch(data) {
      data.forEach((item) => {
        if (item.children.length > 0) {
          this.searchData.push({ label: item.title, isLabel: true });
          this.initSearch(item.children);
        } else {
          this.searchData.push({ value: item.key, label: item.title });
        }
      });
    },
  },
};
</script>